<template>
	<view class="orderlist">
		<view class="order-taps">
			<view :class="tapsActive == index ?'tapsitem active':'tapsitem'" v-for="(item,index) in tapslist"
				:key='index' @click="changetaps(index)">
				{{item}}
			</view>
		</view>
		<view class="goodlist" v-if="isLogin">
			<view class="goodsdetail" v-for="(item,index) in currentlist" :key='index'>
				<view class="title">
					<text>订单编号：{{item.order_id}}</text>
					<text>{{order_status[item.status]}}</text>
				</view>
				<view class="goodsinfo" v-for="(info,index) in item.goods" :key="info.id" @click="toDetail(item.id)">
					<image :src="addurl(info.logo_url)" mode=""></image>
					<view class="msg">
						<view class="name">
							{{info.name}}
						</view>
						<view class="num">
							<text>￥{{info.goods_price}}</text>
							<text class="number">x{{info.num}}</text>
						</view>
					</view>
				</view>
				<view class="goodsfoot">
					<view class="paynum">
						支付：￥{{item.pay_amount}}
					</view>
					<view class="payforbtn">
						<text v-if="item.status == 2" @click="toWeb(item.express_num)">查看物流</text>
						<text v-if="item.status == 0" @click="cancel(item)">取消订单</text>
						<text v-if="item.status == 0" class="sure" @click="go(item)">去支付</text>

						<text v-if="item.status == 1">待发货</text>
						<text v-if="item.status == 2" class="sure" @click="getGoods(item)">确认收货</text>
						<text v-if="item.status == 3">已完成</text>

					</view>
				</view>
			</view>

		</view>
		<view class="" v-else>
			<view class="">
				<navigator url="/pages/login/index">
					<view class="tips">请先登录</view>
				</navigator>

			</view>
		</view>


	</view>
</template>

<script>
	import {
		checkLogin
	} from '../../api/login.js'
	import {
		OrderList,
		CancelOrder,
		OrderSure
	} from '../../api/api.js'
	export default {
		data() {
			return {
				tapslist: ['全部', '待付款', '待发货', '待收货', '已完成'],
				taps_index: ['total', 'unpay', 'unsend', 'unreceive', 'finish'],
				order_status: [],
				tapsActive: 0,
				isLogin: false,
				goodslist: [],
				orderlist: [],
				currentlist: [],
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.tap) {
				this.tapsActive = e.tap
			} else {
				this.tapsActive = 0
			}
			if (checkLogin()) {

				this.isLogin = true
				this.OrderList()
			} else {
				this.isLogin = false
			}
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/orderDetail/index?id=' + id
				})
			},
			toWeb(url) {
				uni.navigateTo({
					url: '/pages/order/wuliu?url=' + url
				})
			},
			getGoods(item) {
				uni.showModal({
					title: '提示',
					content: '确实要收货吗？',
					success: (res) => {
						if (res.confirm) {
							OrderSure({
								order_id: item.order_id
							}).then(res => {
								console.log(res)
								if (res.status == 1) {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
									this.OrderList()
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
								}
							})
						}
					}

				})

			},
			addurl(url) {
				return this.websiteUrl + url
			},
			OrderList() {
				OrderList().then(res => {
					if (res.status == 400) {
						uni.removeStorageSync('token')
						this.isLogin = false
					} else {
						// this.goodslist = res.order
						this.orderlist = res.order
						this.currentlist = this.orderlist[this.taps_index[this.tapsActive]]
						this.order_status = res.order_status
						console.log(this.currentlist)
					}

				})
			},
			changetaps(index) {
				this.tapsActive = index
				this.currentlist = this.orderlist[this.taps_index[index]]
			},
			cancel(item) {
				uni.showModal({
					title: '提示',
					content: '确实要取消订单吗，不可恢复',
					success: (res) => {
						console.log(res)
						if (res.confirm) {
							CancelOrder({
								order_id: item.id
							}).then(res => {
								this.OrderList()
							})
						}

					}

				})
			},
			go(item) {
				uni.navigateTo({
					url: '/pages/orderpay/index?orderid=' + item.order_id
				})
			}

		}
	}
</script>

<style>
	.orderlist .order-taps {
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		line-height: 90rpx;
		box-shadow: 0 1px 5px #ccc;
	}

	.orderlist .order-taps view {
		width: 20%;
		text-align: center;
		font-size: 15px;
	}

	.orderlist .order-taps .active {
		color: #1d3f2b;
		border-bottom: 1px solid;
	}

	.orderlist .goodsdetail {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 0;
	}

	.orderlist .goodsdetail .title {
		display: flex;
		justify-content: space-between;
		padding: 0 5%;
	}

	.orderlist .goodsdetail .title text {
		font-size: 12px;
	}

	.orderlist .goodsinfo {
		display: flex;
		padding: 3%;
	}

	.orderlist .goodsinfo image {
		width: 200rpx;
		height: 200rpx;
	}

	.orderlist .goodsinfo .msg {
		width: 65%;
		margin-left: 5%;
	}

	.orderlist .goodsinfo .msg .name {
		font-size: 13px;
	}

	.orderlist .goodsinfo .num {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.orderlist .goodsinfo .num text {
		color: #EC5211;
	}

	.orderlist .goodsinfo .num .number {
		color: #777;
		font-size: 26rpx;
	}

	.orderlist .goodsfoot {
		display: flex;
		justify-content: space-between;
		padding: 3% 5%;
		border-top: 1px solid #ccc;
		align-items: center;
	}

	.orderlist .goodsfoot .paynum {
		font-size: 12px;
	}

	.orderlist .goodsfoot .payforbtn {
		width: 70%;
		display: flex;
		justify-content: flex-end;
	}

	.orderlist .goodsfoot .payforbtn text {
		border: 1px solid #ccc;
		color: #777;
		font-size: 12px;
		padding: 2% 4%;
		border-radius: 5px;
		margin: 0 2%;
		display: block;
	}

	.orderlist .goodsfoot .payforbtn .sure {
		background: #FF5E53;
		color: #fff;
		border: 0;
	}

	.tips {
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		color: #EA1313;
	}
</style>
